<script setup>
import {reactive, ref} from "vue";
import api from '@/api'
import {ElMessage} from "element-plus";

const menuNameIsNull = (val) => {
	if (val === '' || val === null) {
		return '暂无数据'
	} else {
		return val
	}
}

const hiddenNmae = (val) => {
	if (val === 'true') {
		return '隐藏'
	} else {
		return '不隐藏'
	}
}


const searchParams = ref({
	param:''
})

const dialogAddForm = ref(false)

const form = ref({
	id: '',
	menuBreadcrumb: 1,
	menuFilelocation: '',
	hidden: 'false',
	menuIcon: '',
	menuLevel: 1,
	menuName: '',
	menuOrder: 0,
	menuUrl: '',
	parentId: 0,
	officeName: ''
})

const rules = reactive({
	menuName: [
		{required: true, message: '请填写菜单名称', trigger: 'blur'}
	],
	menuUrl: [
		{required: true, message: '请填写菜单地址', trigger: 'blur'}
	],
	menuFilelocation: [
		{required: true, message: '请填写菜单地址', trigger: 'blur'}
	],
	hidden: [
		{required: true, message: '请选择是否隐藏', trigger: 'change'}
	],
	hiddenIs: [
		{required: true, message: '请选择是否隐藏', trigger: 'change'}
	]
})

const showFormTypeTitle = ref('')
const showFormTypes = ['新建', '编辑','子级菜单新增']
const formRef = ref(null)

/**
 * 显示form弹框
 * @param typeIndex showFormTypes
 * @param row 行数据（用于编辑）
 */
const showForm = (typeIndex, row) => {
	showFormTypeTitle.value = showFormTypes[typeIndex]
	if(row) {
		if(typeIndex !== 2 ){
			form.value = JSON.parse(JSON.stringify(row))
		}
		if(typeIndex > 1) {
			form.value.parentId = row.id
			form.value.menuLevel = row.menuLevel + 1
			form.value.menuOrder = row.menuOrder + 1
		}
	}
	dialogAddForm.value = true
}

/**
* 重置弹框form
*/
const dialogClose = ()=>{
	formRef.value.resetFields()
}

let listNub = 0
const getTableData = (res, data)=>{
	console.log(data)
	listNub = data.length
}

const tableRef = ref(null)

/**
 * 提交form
 */
const onsubmit = async () => {
	await formRef.value.validate(async (vaild) => {
		if (vaild) {
			let req
			if(showFormTypeTitle.value === '编辑') {
				req = await api.menu.edit.post(form.value)
			}else {
				form.value.menuOrder = listNub + 1
				req = await api.menu.add.post(form.value)
			}
			ElMessage({
				message: req.msg,
				type: 'success',
			})
			dialogAddForm.value = false
			tableRef.value.refresh() // 请求列表
		}
	})
}

/**
* 删除
* @param item 单个数据
*/
const onDelete = (item) =>{
	api.menu.delete.post(item).then(res=>{
		ElMessage({
			message: res.msg,
			type: 'success',
		})
		tableRef.value.refresh() // 请求列表
	})
}
</script>

<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button icon="el-icon-plus" type="primary" @click="showForm(0)">新建</el-button>
<!--				<el-button icon="el-icon-delete" plain type="danger"></el-button>-->
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="tableRef" :apiObj="list.apiObj"  :params="searchParams" @dataChange="getTableData"
					 stripe>
				<el-table-column type="expand" width="35">
					<template #default="scope">
<!--						子table-->
						<scTable  v-if="scope.row.children.length > 0" ref="treeTable" :data="scope.row.children" :hidePagination="true" :hideDo="true">
							<el-table-column align="center" width="35"/>
							<el-table-column align="center" label="子级编号" type="index" width="100"/>
							<el-table-column align="center" label="子级菜单名称" prop="menuName" show-overflow-tooltip>
								<template #default="scope">{{ scope.row.menuName }}</template>
							</el-table-column>
							<el-table-column align="center" label="子级页面路径" prop="menuUrl"/>
							<el-table-column align="center" label="子级icon图标" prop="menuIcon">
								<template #default="scope">{{   menuNameIsNull(scope.row.menuIcon) }}</template>
							</el-table-column>
							<el-table-column align="center" label="子级页面菜单位置" prop="menuFilelocation"/>
							<el-table-column align="center" label="页面显示" prop="hidden">
								<template #default="scope">{{  hiddenNmae(scope.row.hidden) }}</template>
							</el-table-column>
							<el-table-column
								label="操作"
								align="center"
								width="150">
								<template #default="scope">
									<el-button
										size="small"
										icon="Edit"
										type="primary"
										plain
										circle
										@click="showForm(1,scope.row)"
									/>

									<el-popconfirm title="您确定要删掉该菜单?" @confirm="onDelete(scope.row)" width="200">
										<template #reference>
											<el-button
												size="small"
												plain
												type="danger"
												icon="Delete"
												circle
											/>
										</template>
									</el-popconfirm>
								</template>
							</el-table-column>
						</scTable>
					</template>
				</el-table-column>
				<el-table-column align="center" label="编号" type="index" width="60"/>
				<el-table-column
					label="菜单名称">
					<template #default="scope">
						<el-tag
							:type="scope.$index % 2 === 0 ? '': 'success'"
							disable-transitions
						>{{ scope.row.menuName }}
						</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" label="页面路径" prop="menuUrl"/>
				<el-table-column align="center" label="icon图标" prop="menuIcon">
					<template #default="scope">{{ menuNameIsNull(scope.row.menuIcon) }}</template>
				</el-table-column>
				<!-- <el-table-column prop="parentId" label="起源ID" width="220px" align="center" /> -->
				<el-table-column align="center" label="页面位置" prop="menuFilelocation">
					<template #default="scope">{{ menuNameIsNull(scope.row.menuFilelocation) }}</template>
				</el-table-column>
				<el-table-column align="center" label="页面显示" prop="hidden">
					<template #default="scope">{{ hiddenNmae(scope.row.hidden) }}</template>
				</el-table-column>
				<el-table-column
					label="操作"
					align="center"
					width="150">
					<template #default="scope">
						<el-button
							size="small"
							icon="Plus"
							type="primary"
							plain
							circle
							@click="showForm(2,scope.row)"
						/>
							<el-button
								size="small"
								icon="Edit"
								type="primary"
								plain
								circle
								@click="showForm(1,scope.row)"
							/>

						<el-popconfirm title="您确定要删掉该菜单?" @confirm="onDelete(scope.row)" width="200">
							<template #reference>
								<el-button
									size="small"
									plain
									type="danger"
									icon="Delete"
									circle
								/>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
	<el-dialog
		v-model="dialogAddForm"
		:close-on-click-modal="false"
		@close="dialogClose"
		:width="700"
		:title="`${showFormTypeTitle}`">
		<el-form
			ref="formRef"
			:model="form"
			label-position="top"
			label-suffix="："
			:show-message="false"
			:rules="rules">
			<el-row>
				<el-col :span="12">
<!--					<el-form-item v-if="form.parentName && showFormTypeTitle.indexOf('子级') !== -1" label="上级部门">-->
<!--						<el-input v-model="form.parentName" clearable disabled style="width:90%"/>-->
<!--					</el-form-item>-->
					<el-form-item label="菜单名称" prop="menuName">
						<el-input v-model="form.menuName" clearable  placeholder="请输入菜单名称" style="width:90%"/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="路由地址:" prop="menuUrl">
						<el-input v-model="form.menuUrl" clearable  style="width:90%"/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item  label="页面路径:">
						<el-input
							v-model="form.menuFilelocation"
							autocomplete="off"
							placeholder="请输入菜单路径"
							clearable
							style="width:90%"
						/>
					</el-form-item>
					<el-form-item label="是否隐藏:" prop="hidden">
						<el-select
							v-model="form.hidden"
							placeholder="请选择是否隐藏"
							style="width:90%"
						>
							<el-option
								label="不隐藏"
								value="false"
							/>
							<el-option
								label="隐藏"
								value="true"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="菜单icon:" prop="menuIcon">
						<el-input v-model="form.menuIcon" autocomplete="off" style="width:90%"/>
					</el-form-item>
				</el-col>
			</el-row>

<!--			<el-form-item label="组织名称" prop="orgName">-->
<!--				<el-input v-model="form.orgName" clearable placeholder="请输入组织名称" style="width:90%"/>-->
<!--			</el-form-item>-->
<!--			<el-form-item label="部门编码" prop="orgNo">-->
<!--				<el-input v-model="form.orgNo" :disabled="showFormTypeTitle.indexOf('编辑') !==-1" clearable  placeholder="请输入部门编码" style="width:90%"/>-->
<!--			</el-form-item>-->
		</el-form>
		<template #footer>
			  <span class="dialog-footer">
				<el-button text @click="dialogAddForm = false">取消</el-button>
				<el-button type="primary" @click="onsubmit">
				  确定
				</el-button>
			  </span>
		</template>
	</el-dialog>
</template>

<script>
import AddUserPopover from "@/components/addUserPopover/index.vue";

export default {
	name: 'tableBase',
	components: {AddUserPopover},
	data() {
		return {
			list: {
				apiObj: this.$API.menu.list
			}
		}
	},
	created() {
		setTimeout(() => {
			console.log(this.list)
		}, 50000)
	},
	methods: {
		filterHandler(value, row, column) {
			const property = column['property']
			return row[property] === value
		}
	}
}
</script>

<style lang="scss" scoped>
.form-select {
	width: 100%;
}
</style>
